<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/demo.css"/>
		<script src="../../js/demo.js" type="text/javascript" charset="utf-8"></script>
		<title>新用户注册</title>
	</head>
	<body>
		<!--header-->
		<div class="header">
			<div class="header-content">
				<ul class="nav left">
					<li><img src="../../img/regist-arrow.png"/></li> 
					<li class="nav-one"><a href="login.html">返回</a></li>
					<li class="nav-two"><a href="login-home.html">关闭</a></li>
				</ul>
				<p class="left">新用户注册</p>
				<div class="right nav_right">
					<img src="../../img/regist-list.png"/>
				</div>
			</div>
		</div>
		<!--main-->
		<div class="main clear">
				<div class="main-content">
					<div class="telephone">
						<label for="tel">
							<img src="../../img/regist-phone.png"/>
						</label>
						<input type="text" id="usertel" value="" onblur="validatePhone()" name="phone" placeholder="输入手机号码"/>
						<span style="font-size: 25px;color: red;" id="span2"></span>
					</div>	
				</div>
				<div class="main-content1">		
					<div class="yzm">
						<label for="yzm">
							<img src="../../img/regist-shuqian.png"/> 
						</label>
						 <input type="text" id="useryzm" value="" name="yzm" placeholder="输入验证码"/>		
						 <span style="font-size: 25px;color: red;" id="span3"></span>				
					    <!--  <a href="javascript:void(-1);" onclick="sendVerificationCode()">发送验证码</a> -->				     
					</div>
					<span hidden="hidden" id="span" style="margin-left: 400px;">
					      <img id="authimg" src="/qiaomengapp/authImage" style="width: 100px;height: 50px;" >&nbsp;&nbsp;&nbsp;
					      <a href="javascript:void(-1);" onclick="javascript:changeImg()" style="color:white;"><label style="color:blue; font-size: 30px" >看不清?</label></a>
					</span>
				</div>
				
				<input type="submit" name="" onclick=" validateAuthCode()" id="usernext" value="下一步" class="next"/>
			<div class="requirement">
				<img src="../../img/regist-check.png"/>
				我已阅读并同意注册<span><a href="javascript:;">许可协议</a></span>和<span><a href="javascript:;">隐私声明</a></span>
			</div>
			<div class="static-img">
				<img src="../../img/regist-back.png"/>
			</div>
		</div>
		<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
		<!-- <script src="../../js/demo.js" type="text/javascript" charset="utf-8"></script> -->
		<!-- <script src="../../js/demo2.js" type="text/javascript" charset="utf-8"></script> -->
		<script type="text/javascript">
			//发送手机号给后端,后端验证手机号
			function validatePhone(){
				var phone=$('#usertel').val();
				$.ajax({
					type:"post",
					url:"/qiaomengapp/user/validatePhone",
					data:"phone="+phone,
					success:function(data){
						$('#span2').html(data);
						if(data==""){
							$('#span').attr("hidden",false);
						}	
					}
				});
			}
			/* 刷新验证码 */
			 function changeImg(){
			        var img = document.getElementById("authimg"); 
			        img.src = "/qiaomengapp/authImage?date=" + new Date();
			    }
			
			//验证验证码
			function validateAuthCode(){
				var authCode = $('#useryzm').val();
				var phone=$('#usertel').val();
				$.ajax({
					type:"post",
					url:"/qiaomengapp/user/validateAuthCode",
					data:"authCode="+authCode+"&phone="+phone,
					success:function(data){
						$('#span3').html(data);						
						if(data==""){
							 window.location.href ='/qiaomengapp/html/register-login/register-setpsd.html';
						}
					}	
				})
			}
		</script>
	</body>
</html>
